<template>
  <u-loadmore :status="loadMoreStatus" :margin-top="20" :margin-bottom="20" @loadmore="loadmore" :load-text="loadText"/>

</template>

<script>
export default {
  props: {
    // 组件准备好后调用，触发开始加载
    ready: {
      type: Function,
      default: ()=>{}
    }
  },
  computed: {

  },
  data(){
    return {
      // 加载前值为 loadmore，加载中为 loading，没有数据为 nomore
      loadMoreStatus: 'loadmore',
      loadErrorFlag: false,
      loadText: {
        loadmore: '加载更多',
        loading: '正在加载...',
        nomore: '没有更多了'
      }
    }
  },
  created(){
    this.loading()
    this.ready()
  },
  methods: {
    loadmore(){
      this.$emit('loadmore')
    },
    // 加载时调用
    loading(){
      this.loadErrorFlag = false
      this.loadMoreStatus = 'loading'
    },
    loadError(){
      this.loadErrorFlag = true
      this.loadMoreStatus = 'loadmore'
    },
    // 加载完调用
    loaded(page){
      this.loadErrorFlag = false
      if(page.current >= page.pages){
        this.loadMoreStatus = 'nomore';
      }
      else{
        this.loadMoreStatus = 'loadmore'
      }
    },
    setMoreStatus(status){
      this.loadMoreStatus = status
    },
    // 判断是否可以加载更多数据
    canLoad(){
      return 'loadmore' == this.loadMoreStatus
    }
  },
  watch: {
    loadErrorFlag(val){
      let r = null
      if(val){
        r = '抱歉加载失败，点击重试'
      }else {
        // 走默认的
        r = '加载更多'
      }
      this.loadText.loadmore = r
    }
  }
}
</script>

<style scoped>

</style>